<template>
  <view class="bot_top">
    <view class="login-form-content">
      <swiperTabHead :tabBars="labelList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="mobile" class="input" type="text" placeholder="请输入账号" disabled maxlength="11" />
      </view>
      <view class="input-item flex align-center" v-if="tabIndex == 1" style="margin-bottom: 62rpx;">
        <view class="iconfont icon-password icon"></view>
        <input v-model="form.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" v-if="tabIndex == 0">
        <view class="iconfont icon-code icon"></view>
        <input v-model="form.smscode" type="number" class="input" placeholder="请输入验证码" maxlength="6" />
        <text @click="getSMSCode(2)" class="login-code" v-show="btnShow">获取验证码</text>
        <text class="login-code text-primary" v-show="!btnShow">{{counter}}</text>
      </view>
      <view class="sounds-text" v-if="tabIndex == 0"  v-show="voiceShow" @click="getSMSCode(102)">收不到短信？获取语音验证码</view>
      <view class="action-btn" style="margin-top: 62rpx">
        <button @click="smsLogin" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">登录</button>
      </view>
    </view>
    <!--滑块验证弹出-->
    <slider-verify :show="verifyShow" :do-action="doAction"  @success="touchSliderResult" @close="onClose"></slider-verify>
  </view>
</template>

<script>
import {getCode} from "../../utils/sendSmsCode";
import swiperTabHead from "@/components/slideTab/slideTab"
import SliderVerify from "../../components/slider-verify/slider-verify";
export default {
  name: "loginPassWordOrSMS",
  mixins: [getCode],
  components: {
    SliderVerify,
    swiperTabHead
  },
  props: {
    mobile: {
      type: [String, Object],
    },
  },
  data() {
    return {
      tabIndex: 0,
      labelList: [{title: '验证码登录'},{title: '密码登录'}],
      counter: '获取验证码',
      loginForm: {
        type: 0
      }, //
      form: {}, //
    }
  },
  methods:{
    //短信验证码
    getSMSCode(type) {
      this.verifyShow = true;
      this.doAction = "this.getCode(this.loginForm.mobile, this.loginForm.smsType)";
      this.loginForm.smsType = type
      this.loginForm.mobile = this.mobile;
    },
    /** 接受子组件传过来的值点击切换导航 */
    tabtap(index) {
      // 清空验证码状态
      if (index == 1) {
        this.doAction = "this.smsLogin()";
      }
      this.tabIndex = index;
    },
    smsLogin() {
      this.doAction = "this.smsLogin()";
      // 检测异常操作
      if (this.sliderVerifyAddVerifyNumber()) {
        return;
      }
      this.$modal.loading("登录中");
      // 验证码登录
      if (this.tabIndex == 0) {
        this.loginForm.smscode = this.form.smscode;
        this.loginForm.type = 0;
      }
      // 密码登录
      if (this.tabIndex == 1) {
        this.loginForm.password = this.form.password;
        this.loginForm.type = 1;
      }
      this.loginForm.mobile = this.mobile;
      this.$store.dispatch('Login', this.loginForm).then(() => {
        this.$modal.closeLoading()
        this.$emit("loginOk", "OK");
      }).catch(() => {
        this.$modal.closeLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-form-content ::v-deep .swiper-tab-list {
  margin: 0 50rpx;
}
.sounds-text {
  text-align: right;
  margin-top: 6rpx;
  color: #777;
  font-size: 26rpx;
}

.text-primary {
  color: $uni-color-primary;
}

.login-form-content {
  text-align: center;
  margin: 0 auto;
  width: 90%;

  .input-item {
    margin-top: 40rpx;
    background-color: #f5f6f7;
    height: 90rpx;
    border-radius: 40rpx;

    .icon {
      font-size: 38rpx;
      margin-left: 20rpx;
      color: #999;
    }

    .input {
      width: 100%;
      font-size: 28rpx;
      line-height: 40rpx;
      text-align: left;
      padding-left: 30rpx;
    }

  }

  .login-btn {
    margin: 10rpx 0 60rpx;
    height: 90rpx;
  }

}

.login-code {
  width: 360rpx;
  color: #000;
}

.bot_top {
  margin: 0 30rpx;
}
</style>